<!DOCTYPE html>
<html>
  <head>
    <title>Buzz Food</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light|Molengo"
      rel="stylesheet" type="text/css">
    <link href="/css/screen.css"
      media="screen" rel="stylesheet" type="text/css" />
    <link href="/css/handheld.css"
      media="handheld" rel="stylesheet" type="text/css" />
    <link href="/css/handheld.css"
      media="only screen and (max-device-width: 600px)"
      rel="stylesheet" type="text/css" />
    <script 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <script 
      src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js">
    </script>
    <script>      
      function replaceUpdates(bucket, food, scale, effect) {
        var graphWidth = (1.0 * food.counter / scale) * 100;
        var shortSnippetPattern = new RegExp(
          "^.*?(.{0,65})(" + food.name + ")(.{0,65}).*?$", "ig"
        );
        var longSnippetPattern = new RegExp("(" + food.name + ")", "ig");

        var shortSnippet = null;
        var longSnippet = food.lastContent.replace(
          longSnippetPattern, "<span class=\"highlight\">$1</span>"
        );
        shortSnippet = food.lastContent;
        shortSnippet = shortSnippet.replace(/<br[^>]*>/ig, " ");
        shortSnippet = shortSnippet.replace(
          /(<[^>]*>(.*?)<\/[^>]*>|<[^>]*>)/ig, ""
        );
        // We don't want to accidentally split on a character entity
        shortSnippet = shortSnippet.replace(/&amp;/g, "&");
        shortSnippet = shortSnippet.replace(/&lt;/g, "<");
        shortSnippet = shortSnippet.replace(/&gt;/g, ">");
        shortSnippet = shortSnippet.replace(/&apos;/g, "\'");
        shortSnippet = shortSnippet.replace(/&quot;/g, "\"");
        shortSnippet = shortSnippet.replace(/\n/g, " ");
        shortSnippet = shortSnippet.replace(/ +/g, " ");
        shortSnippet = shortSnippet.replace(
          shortSnippetPattern, "… $1<span class=\"highlight\">$2</span>$3 …"
        );
        var html = 
          "<div class=\"update\" style=\"display: none;\">" +
            "<h1>" +
              food.name +
            "</h1>" +
            "<p class=\"short snippet\">" +
              shortSnippet +
            "</p>" +
            "<p class=\"long snippet\" style=\"display: none;\">" +
              longSnippet +
            "</p>" +
            "<div class=\"graph\" style=\"width: " +
              graphWidth + "%\">&nbsp;</div>" +
          "</div>";
        $(".contents ." + bucket).append(html);
        $(".contents ." + bucket + " .update").show(effect, {}, 500);
        $(".contents ." + bucket + " .update .short").click(function () {
          $(".contents ." + bucket + " .update .short").hide(
            "blind", {}, 500, function () {
              $(".contents ." + bucket + " .update .long").show(
                "blind", {}, 500
              );
            }
          );
        });
        $(".contents ." + bucket + " .update .long").click(function () {
          $(".contents ." + bucket + " .update .long").hide(
            "blind", {}, 500, function () {
              $(".contents ." + bucket + " .update .short").show(
                "blind", {}, 500
              );
            }
          );
        });
        $(".contents ." + bucket).data('food', food);
      }
      
      function renderFoods(data) {
        
        var my_buckets = [
          "one",
          "two",
          "three",
          "four",
          "five",
          "six",
          "seven",
          "eight"
        ]
        
        var scale = null;
        var table = {};
        for (var i = 0; i < data.length; i++) {
          var food = data[i];
          var bucket = my_buckets[i]
          //var bucket = food.name.replace(/^i /, '');
          if (scale == null || food.counter > scale) {
            scale = 1.0 * food.counter;
          }
          // This 'table' is useless
          table[bucket] = food;
        }
        
        for (var i = 0; i < my_buckets.length; i++) {
          //var bucket = buckets[i];
          var bucket = my_buckets[i]
          var food = data[i];
          if (typeof food != 'undefined') {
            var existingDivs = $('.' + bucket + ' .update');
            if (existingDivs.length > 0) {
              var lastFood = $('.' + bucket).data('food');
              if (!lastFood || food.lastModified > lastFood.lastModified) {
                existingDivs.remove();
                replaceUpdates(bucket, food, scale, "drop");
              }
            } else {
              replaceUpdates(bucket, food, scale, "fade");
            }
          }
        }
      }

      var ioBlock = false;
      var nextUpdate = null;
      var backOff = 5000;
      $(document).ready(function() {
        setInterval(function () {
          // Don't do anything if we're waiting for an XHR
          if (ioBlock) return;
          var now = new Date().getTime();
          // Check if we should update again
          if (!nextUpdate || nextUpdate < now) {
            ioBlock = true;
            $.ajax({
              url: '/pshb/updates',
              async: true,
              ifModified: true,
              success: function (data, status, xhr) {
                if (typeof data != 'undefined') {
                  backOff = 5000;
                  renderFoods(data);
                } else {
                  backOff *= 2;
                }
                nextUpdate = now + backOff;
                ioBlock = false;
              }
            })
          }
        }, 1000);
      })
    </script>
  </head>
  <body>
    <div class="contents">
      <div class="group one">
      </div>
      <div class="group two">
      </div>
      <div class="group three">
      </div>
      <div class="group four">
      </div>
      <div class="group five">
      </div>
      <div class="group six">
      </div>
      <div class="group seven">
      </div>
      <div class="group eight">
      </div>
    </div>
    <footer>
      © 2010 Google<br />
      Inspired by <a href="http://buzz-mood.appspot.com/">Buzz Mood</a>.<br />
      <a href="http://code.google.com/p/buzz-food/">View source</a>.
    </footer>
  </body>
</html>
